<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <multiInput class="w-50" v-model="form.tracking_number" placeholder="快递单号"></multiInput>
        <SelectWarehouse class="selectClass" v-model="form.warehouse_id" :multiple="true" placeholder="仓库" ></SelectWarehouse>
        <select-personnel class="w-40" v-model="form.sign_user_id" placeholder="签收人"></select-personnel>

        <el-select class="selectClass" v-model="form.relate_status" placeholder="采购单号是否为空" clearable>
          <el-option v-for="item in options['stockin.expressOrder']?.[0].relateStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>

        <el-select v-model="form.sign_status" placeholder="状态">
          <el-option v-for="item in options['stockin.expressOrder']?.[0].signStatus" :key="item.value"
            :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <VGroup>
          <el-select class="selectClass" v-model="form.timeRange.type" style="max-width: 150px">
            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()" style="max-width: 300px" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <el-button class="ml-auto" @click="handleExport()"><svg-icon icon-class="import" />导出</el-button>
      </template>
    </VTable>
    <ComModal ref="ComModalRef" :options="options" @query="query"></ComModal>
    <ComRemark ref="ComRemarkRef" :options="options" @query="query"></ComRemark>
    <derived-center ref="DerivedCenterRef"></derived-center>
  </VPage>
</template>
<script setup name="StorageParcel-signing" lang="jsx">
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, toRefs } from 'vue'
import { getEnums } from '@/api/public'
import { queryListOrder, delOrder } from './api'
import ComModal from './components/ComModal.vue'
import ComRemark from './components/ComRemark.vue'
import multiInput from '@/components/multiInput';
import SelectWarehouse from '@/components/SelectWarehouse'

const timeOption = [
  { label: "签收时间", value: "sign_time" },
  { label: "创建时间", value: "create_time" },
]

const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: 60 },
  formConfig: {
    data: {
      timeRange: { type: 'sign_time', value: [], range: true },
    }
  },
  columns: [
    {
      type: "seq", title: '序号',width: 100
    },
    {
      field: 'logistics_name', title: '物流商',width: 120
    },
    {
      field: 'tracking_number', title: '快递单号',width: 200
    },
    {
      field: 'sign_user', title: '签收人',width: 160
    },
    {
      field: 'sign_time', title: '签收时间',width: 160
    },
    {
      field: 'receive_json', title: '采购单号',width: 200
    },
    {
      field: 'box_num', title: '箱数',width: 120
    },
    {
      field: 'warehouse_name', title: '收货仓库',width: 120
    },
    {
      field: 'sign_status_cn', title: '状态',width: 120
    },
    {
      field: 'remark', title: '备注',width: 220
    },
    {
      title: '操作', width: "250", fixed: "right", slots: {
        default: ({ row }) => {
          return <div class="table-option">
            <div>
              <el-button type="primary" link class="mr-2" onClick={() => handleRelate(row.id)}>关联采购单号</el-button>
              <el-button type="primary" link class="mr-2" onClick={() => handleRemark(row.id)}>添加备注</el-button>
              <el-button type="primary" link class="mr-2" onClick={() => handleCancellation(row.id)}>作废</el-button>
            </div>
          </div >
        }
      }
    }
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await queryListOrder({ ...form, ...page })
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})
const query = () => {
  tableRef.value.query()
}

const data = reactive({
  options: []
})
const { options } = toRefs(data)

// 获取枚举类
const fetchOption = async () => {
  getEnums({
    version: "v1", "name": [
      "stockin.expressOrder"
    ]
  }).then(res => {
    options.value = res.data
  })
}
provide('options', options)
fetchOption()

const ComModalRef = ref()
const handleRelate = (id) => {
  ComModalRef.value.open(id)
}

const ComRemarkRef = ref()
const handleRemark = (id) => {
  ComRemarkRef.value.open(id)
}

const handleCancellation = (id) => {
  ElMessageBox.confirm(
    '是否确定作废当前项?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(async () => {
      try {
        const res = await delOrder({
          express_order_id: id
        })
        ElMessage.success(res.data.message)
        query()
      } catch (e) {
        throw Error(e)
      }

    })
    .catch(() => {

    })
}

const DerivedCenterRef = ref()
const handleExport = (val) => {
  let condition = tableRef.value.getQueryForm()
  DerivedCenterRef.value.open({
    id: 65,
    tag_name: 'wms',
    condition
  })
}

</script>